<template>
  <el-drawer
    :visible.sync="diailogShow"
    :with-header="true"
    size="60%"
    class="top"
    :title="title"
    @close="onClose"
  >
    <el-row :gutter="6" class="middle">
      <el-form
        ref="form"
        :model="quartData"
        :rules="formRules"
        size="medium"
        label-width="100px"
        label-position="top"
      >
        <el-col :span="12">
          <el-form-item label="所属小区" prop="community_code" class="big">
            <el-select
              v-model="quartData.community_code"
              placeholder="请选择所属小区"
              clearable
              :style="{ width: '80%' }"
            >
              <el-option
                v-for="item in selectedAll"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="栋数名称" prop="name">
            <el-input
              v-model="quartData.name"
              placeholder="请输入"
              clearable
              :style="{ width: '80%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电梯数" prop="lift" class="big">
            <el-input
              v-model.number="quartData.lift"
              type="number"
              placeholder="请输入"
              controls-position="right"
              :style="{ width: '80%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总户数" prop="house">
            <el-input
              v-model.number="quartData.house"
              type="number"
              placeholder="请输入"
              controls-position="right"
              :min="1"
              :style="{ width: '80%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="描述" prop="desc" class="big">
            <el-input
              v-model="quartData.desc"
              type="textarea"
              placeholder="请输入描述"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '80%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large" class="button">
            <el-button @click="resetForm">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-drawer>
</template>
<script>
import { communityInfo, addHouseInfo, updateHouseInfo } from '@/api/house/house_building'
export default {
  name: 'BuildingA',
  components: {},
  props: [],
  data() {
    return {
      list: [],
      diailogShow: false, // 弹框
      quartData: {
        community_code: '', // 获取小区名称
        desc: '', // 描述
        house: '', // 总户数
        lift: '', // 电梯数
        name: '' // 栋数名称
      },
      selectedAll: [], // 下拉框
      // 表单验证规则
      formRules: {
        community_code: [
          {
            required: true,
            message: '所属小区编号不可为空且检查类型',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '栋数名称不可为空且检查类型',
            trigger: 'blur'
          }
        ],
        lift: [
          {
            required: true,
            message: '电梯数不可为空且检查类型',
            trigger: 'blur'
          }
        ],
        house: [
          {
            required: true,
            message: '总户数不可为空且检查类型',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.quartData.id ? '修改' : '添加'
    }
  },
  watch: {},
  created() {
    this.communityInfo()
  },
  mounted() {},
  methods: {
    // 下拉框
    async communityInfo() {
      const { data } = await communityInfo()
      // console.log('社区', data.data)
      this.selectedAll = data.data
    },
    // 提交

    async submitForm() {
      //  表单校验
      await this.$refs.form.validate()
      // console.log(this.list)
      // console.log(this.quartData.community_code)
      // const obj = {}
      // this.obj = this.list.find(item => item.community_code === this.quartData.community_code)
      // if (obj && obj.name === this.quartData.name) {
      //   return this.$message.error('不允许重复添加')
      // } else {
      //   await getHouseInfo(this.quartData)
      //   // // 关闭弹窗
      //   this.diailogShow = false
      //   // // 列表更新
      //   this.$emit('updataList')
      // }
      // const res = await getHouseInfo(this.quartData)

      if (this.quartData.id) {
        await updateHouseInfo(this.quartData)
        this.$message.success('修改成功')
      } else {
        const { data } = await addHouseInfo(this.quartData)
        if (!data.success) {
          this.$notify.error({
            title: '错误提示',
            message: data.msg
          })
        } else {
          this.$message.success('添加成功')
        }
      }

      // this.$message.success(this.quartData.id ? '修改成功' : '添加成功')
      this.onClose()
      this.$emit('updataList')

      // if (res.success) {
      //   this.$message('添加成功')
      //   // // 关闭弹窗
      //   this.diailogShow = false
      //   // // 列表更新
      //   this.$emit('updataList')
      // } else {
      //   // this.$message.error(res.msg)
      //   this.$notify.error({
      //     title: '错误提示',
      //     message: 'res.msg'
      //   })
      // }
    },
    // // 关闭弹窗
    onClose() {
      // 表单重置
      this.quartData = {
        community_code: '', // 获取小区名称
        desc: '', // 描述
        house: '', // 总户数
        // id: '',
        lift: '', // 电梯数
        name: '' // 栋数名称
      }
      // 移除表单校验
      this.$refs.form.clearValidate()
      this.diailogShow = false
    },
    resetForm() {
      // 表单重置
      this.quartData = {
        community_code: '', // 获取小区名称
        desc: '', // 描述
        house: '', // 总户数
        // id: '',
        lift: '', // 电梯数
        name: '' // 栋数名称
      }
      // 移除表单校验
      this.$refs.form.clearValidate()
      this.diailogShow = false
    }
  }
}
</script>
<style lang='scss' scoped>
.big {
  margin-left: 30px;
}
.top {
  // z-index: 9999;
  font-size: 20px !important;
  font-weight: 700;
  color: #000 !important;
// border-bottom: 1px solid #cfcfcf;

}
.middle{
  border-top: 1px solid #cfcfcf;
  padding-top: 20px;
}
.button {
  text-align: right;
  margin-top: 300px;
  margin-right: 20px;
  padding-top: 20px;
border-top: 1px solid #cfcfcf;
}
</style>
